<template>
	<view class="h-full w-full plate-container flex-column">
		<view class="form-title">填写车辆信息</view>
		<view class="plate-form mt-40 flex-column flex-center">
			<view class="flex-between mb-10">
				<text class="left-text">填写车牌号</text>
				<text class="right-text">请填写真实有效的车牌号码</text>
			</view>
			<Plate :plateNumber="plateNumber" @myPlateChange="plateChange" :plateType="plateType" />
		</view>
		<view class="flex-1 radio-container flex align-center">
			<u-radio-group v-model="plateType" active-color="#3A67D5" width="50%">
				<u-radio 
					label-size="26rpx"
					v-for="(item, index) in list" 
					:key="index" 
					:name="item.type"
				>
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="binding">
			<button class="buttom-primary-style" @click="handleSubmit">立即绑定</button>
		</view>
	</view>
</template>

<script>
	import Plate from '@/components/plate/index.vue'
	import { MyCarListAdd } from '@/apis/base.js'
	import { toast } from '@/utils/toast.js'
	export default{
		components: {
			Plate
		},
		data () {
			return {
				plateType: 2,
				plateNumber: ['', '', '', '', '', '', '', ''],
				list: [
					{
						name: '小车(蓝牌)',
						type: 2
					},
					{
						name: '小型新能源汽车',
						type: 4
					},
					{
						name: '大车',
						type: 1
					},
					{
						name: '大型新能源汽车',
						type: 3
					}
				],
			}
		},
		methods: {
			plateChange(val) {
				this.plateNumber = val;
			},
			CarListAdd () {
				const has = this.plateNumber.filter(i => i !== '')
				if (has.length < 7) {
					toast('请填写正确车牌')
				} else {
					const userInfo = uni.getStorageSync("user_info")
					this.plateNumber.length = [1,2].includes(this.plateType) ? 7 : 8
					MyCarListAdd ({ type: this.plateType, phone: userInfo.phonenumber, plate: this.plateNumber.join(',')}).then(res => {
						this.$emit('showSuccess')
					})
				}
			},
			handleSubmit () {
				this.CarListAdd()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.plate-container{
		padding: 25rpx 30rpx 35rpx 30rpx;
	}
	.form-title{
		font-family: PingFang SC;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 50.4rpx;
		text-align: left;
		color: #222222;
	}
	.plate-form{
		height: 193rpx;
		background-image: url('@/static/my/plate-bg.png');
		background-size: 100% 100%;
		padding: 0 20rpx;
		.left-text{
			font-family: PingFang SC;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 42rpx;
			color: #222222;
			position: relative;
			top: -12rpx;
		}
		.right-text{
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 33.6rpx;
			color: #919EB5;
			position: relative;
			top: -16rpx;

		}
	}
	.binding{
		height: 86rpx;
		button{
			font-size: 32rpx !important;
		}
	}
</style>

